<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue实现</title>
  <script src="./js/vue.js"></script>
</head>
<body>
  <div id="app">
    <h3>表单操作</h3>
    <input type="text" name="username" v-model="username">
    <input type="button" value="提交" @click="submit">
    <p>{{ uname }}</p>

    <h3>动态列表</h3>
    <input type="button" value="加载" @click="load">
    <ul>
      <li v-for="item in dataList">{{ item }}</li>
    </ul>
  </div>
  <script>
    var app = new Vue({
      // el: "#app",
      // template: '<h1>test</h1>',
      data: {
        username: 'admin',
        dataList: []
      },
      computed: {
        uname () {
          return this.username[0] + "***"
        } 
      },
      methods: {
        submit() {
          console.log('获取表单的值:', this.username)
          this.load()
        },
        load() {
          this.dataList = ['北京', '上海', '广州', '深圳']
        }
      },
      beforeCreate() {
        console.log('beforeCreate')
        
      },
      created() {
        console.log('created')
       
      },
      beforeMount() {
        console.log('beforeMount')
      },
      mounted() {
        console.log('mounted')
      },
      beforeDestroy() {
        console.log('beforeDestroy')
      },
      destroyed() {
        console.log('destroyed')
      },
      beforeUpdate() {
        console.log('beforeUpdate')
      },
      updated() {
        console.log('updated')
      },
    }).$mount('#app')
  </script>
</body>
</html>